import { Clock, Order } from "@nutui/icons-react-taro";
import { BackTop, Image } from "@nutui/nutui-react-taro";
import { Text, View } from "@tarojs/components";
import {
  getCurrentInstance,
  setNavigationBarTitle,
  useReady,
} from "@tarojs/taro";
import React, { useState } from "react";
import { cookLevelText } from "../../constants";
import { full_data } from "../../mocks";
import { IFood } from "../../types";
import "./index.scss";
definePageConfig({
  navigationStyle: "custom",
});

const CookbookDetail = () => {
  const [cookDetail, setCookDetail] = useState<IFood>();
  const [loading, setLoading] = useState<boolean>(true);

  useReady(() => {
    setLoading(true);
    const id = getCurrentInstance().router?.params.id ?? "";
    const [data] = full_data.filter((item) => item.id === Number(id));
    setNavigationBarTitle({
      title: data.name ?? "菜品详情",
    });
    const timer = setTimeout(() => {
      setCookDetail(data);
      setLoading(false);
      clearTimeout(timer);
    }, 100);
  });

  return (
    <View className="detail">
      <View className="wrapper">
        <View
          className="image-container"
          style={{ backgroundImage: `url(${cookDetail?.cover_image})` }}
        ></View>
        <View className="detail-container">
          <View className="detail-header">
            <View className="detail-title">{cookDetail?.name}</View>
            <View className="detail-date">
              <View className="flex cost">
                <Clock size={14} />
                <Text>{cookDetail?.spend}分钟</Text>
              </View>
              <View className="flex level">
                <Order size={14} />
                <Text>{cookLevelText.get(cookDetail?.cookLevel ?? "")}</Text>
              </View>
            </View>
          </View>
          <View className="detail-desc">{cookDetail?.description}</View>
          <View className="detail-material">
            <Text className="detail-material--title">用料</Text>
            <View className="detail-material--list">
              {cookDetail?.ingredients &&
                cookDetail?.ingredients.map((item, index) => (
                  <View className="item" key={index}>
                    <Text>{item.name}</Text>
                    <Text>{item.weight}</Text>
                  </View>
                ))}
            </View>
          </View>
          <View className="detail-steps">
            <Text className="detail-steps--title">烹饪步骤</Text>
            <View className="detail-steps--content">
              {cookDetail?.steps &&
                cookDetail.steps.map((step, index) => (
                  <View className="detail-steps--item" key={index}>
                    <Text className="step-title">
                      步骤{index + 1}/{cookDetail.steps?.length}
                    </Text>
                    <View className="text">{step.content}</View>
                    <Image
                      lazyLoad
                      src={step.thumbnail ?? ""}
                      height={200}
                      mode="aspectFill"
                    />
                  </View>
                ))}
            </View>
          </View>
        </View>
        <BackTop
          threshold={200}
          zIndex={10}
          style={{ bottom: 30, right: 10 }}
        />
      </View>
      <View className={`mask ${loading ? "" : "mask-1"}`} />
    </View>
  );
};

export default CookbookDetail;
